<template>
  <div :style="userStore.isMobile ? 'width: 100%; margin-top: 10px;' : 'flex: 0 0 auto; margin-right: 80px;'">
    <div :style="userStore.isMobile ? 'display: flex; flex-direction: column; gap: 8px;' : 'display: inline;'">
      <div :style="userStore.isMobile ? 'display: flex; align-items: center;' : 'display: inline;'">
        应收金额：
        <el-tag size="large" type="primary" style="font-size: 14px; font-weight: bold; margin-left: 4px;">
          {{ amountInfo.should }}
        </el-tag>
      </div>
      <div :style="userStore.isMobile ? 'display: flex; align-items: center;' : 'display: inline;'">
        实收金额：
        <el-tag size="large" type="success" style="font-size: 14px; font-weight: bold; margin-left: 4px;">
          {{ amountInfo.actual }}
        </el-tag>
      </div>
      <div :style="userStore.isMobile ? 'display: flex; align-items: center;' : 'display: inline;'">
        管家婆应收金额：
        <el-tag size="large" type="warning" style="font-size: 14px; font-weight: bold; margin-left: 4px;">
          {{ amountInfo.gjpShould }}
        </el-tag>
      </div>
      <div :style="userStore.isMobile ? 'display: flex; align-items: center;' : 'display: inline;'">
        待收金额：
        <el-tag size="large" type="danger" style="font-size: 14px; font-weight: bold; margin-left: 4px;">
          {{ amountInfo.remaining }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup name="amountView">
import { getAmountInfo } from "@/api/project/project";
import { ref, toRefs } from 'vue';
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const props = defineProps({
  datas: {
    type: Object, // 指定类型为对象
    required: true, // 是否必填
  },
  column: {
    type: Number, // 指定类型为数字
    default: 3, // 设置默认值为 3
  },
  sizes: {
    default: 'default',
  },
  projectNo: {
    default: '0',
  },


});

const data = reactive({
  amountInfo: {
    should: null,
    actual: null,
    remaining: null,
    gjpShould: null,
    same: null
  },
});

const { amountInfo } = toRefs(data);
const { projectNo } = toRefs(props);
function initAmount() {
  console.log("11111111111", projectNo.value);

  if (projectNo.value == undefined || projectNo.value == '0' || projectNo.value == null) {
    return
  }

  getAmountInfo(projectNo.value).then((response) => {
    console.log("金额信息", response);
    nextTick(() => {
      amountInfo.value.should = response.data.should
      amountInfo.value.actual = response.data.actual
      amountInfo.value.remaining = response.data.remaining
      amountInfo.value.gjpShould = response.data.gjpShould
      amountInfo.value.same = response.data.same
    });
  });
}


defineExpose({ initAmount })

onMounted(async () => {
  initAmount()

});

</script>